<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
<ui:composition template="#{facesContext.externalContext.request.contextPath}/templates/main_template.xhtml">

	<ui:param name="bean" value="#{chatRoomBean_wordchat}" />

	<ui:define name="customCSS">
		<link rel="stylesheet" href="#{facesContext.externalContext.request.contextPath}/css/chat/wordchat/chatroom.css" />
	</ui:define>

	<ui:define name="customJS">
		<script src="#{facesContext.externalContext.request.contextPath}/js/chat/wordchat/chatroom.js" />
	</ui:define>

	<ui:define name="templateContent">
		<span id="contextPah">#{facesContext.externalContext.request.contextPath}</span>
		<h:form id="chatForm">
			<h:outputText id="headerMsg" class="headerMsg" value="#{bean.headerMsg}"></h:outputText>

			<div id="msgArea">
				<h:panelGrid columns="2" styleClass="mm-form-table" columnClasses="onlineUserList,chatMsg">
					<h:inputTextarea id="onlineUserList" readonly="readonly" style="height:300px;" class="onlineUserList"></h:inputTextarea>
					<h:inputTextarea id="chatMsg" readonly="true" style="height:300px;font-size: small;" class="chatMsg"></h:inputTextarea>
				</h:panelGrid>
			</div>
			<div id="chatMsgArea">
				<h:panelGrid columns="2" styleClass="mm-form-table" columnClasses="chatArea,chatBtn">
					<h:inputTextarea id="chatArea" style="height:60px;" class="chatArea" onkeydown="wordChat.sendMsgEnter(event);"></h:inputTextarea>
					<h:commandButton id="chatBtn" value="Send">
						<f:ajax event="click" onevent="function(data) {wordChat.sendMsg(data);}"></f:ajax>
					</h:commandButton>
				</h:panelGrid>
			</div>
		</h:form>

	</ui:define>

</ui:composition>

</html>
